iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 1
5
Modern Web

從平面轉型成網頁設計的 UI/UX 設計師系列 第 1

【Day 1】平面轉型後的今天,為何選擇網頁設計?

  • 分享至 

  • xImage
  •  

大家好,我是GG!
目前是一名網頁設計師,之前擔任平面設計,後來嘗試轉型成網頁設計至今已滿三年。
三年的時間說長不長,說短不短,倒是在這段上班兼學習的期間,
體會到平面與網頁堪稱「隔行如隔山」,是另一門深奧的學問!

網頁設計要學的東西非常多,線上教學與資源也不勝枚舉。
不用擔心學習資源的同時,五花八門的選擇不一定每個都適合你。
多看一些老師分享的影片、多練習、累積作品和實作能力,
在其中一定可以找到適合自己的學習方式!

三年後的今天,回想當初對於轉職最快的方法,就是「上班」!
當老闆丟給你一個難題,或是從來沒有接觸過的東西,
跟你說:「這個明天下班前要喔~」
你一定會竭盡所能把它生出來的!ヽ(●´∀`●)ノ

web design

設計師一定要的圖配文!有美美的圖,才不會看文字看得很累XD
by Christopher Gower on Unsplash

當初為何選擇網頁設計?

畢業後做平面設計的日子並不長,但在求職過程與後續工作、包含之前大學校外實習的經驗,充分體會到平面設計在職場上被當作「美工」的機率真的很高很高。
當然專業的「美工」是很令人敬佩的,但是當初想找尋「平面設計」的職缺,不外乎就是希望多一點展現設計的機會,也對這行充滿著夢想與熱忱。
可能是運氣不好,遇到了對平面設計待遇不佳的公司,當然薪水也是考慮轉職的一大重點,為何網頁設計的薪水普遍比平面來的好,當初的我也想一探究竟。

思考了一陣子後,決定從平面離職,
挑戰看看網頁設計這條不歸路。

網頁設計師需要會些什麼?

  1. HTML、CSS
    目前大致聽過幾種網頁公司的分工模式:
    一、要求網頁設計師會切版
    切版就是將完成的設計稿用HTML+CSS切成網頁,並且視案子需求做RWD,後續再交給前端工程師製作動畫特效與其他功能,或是交由後端工程師上程式...等等。
    二、單純的視覺設計師
    繪製平面設計稿與各種螢幕尺寸的設計圖,再交由前端工程師或切版工程師做後續處理,不需要會HTML、CSS但需懂基本的觀念,避免畫出程式上難以辦到的設計稿。
    三、擁有自由意志的視覺設計師
    專門設計視覺性強的版面,不用懂程式邏輯,只要畫得出來就有工程師為你實現,但容易發生網站UI很美,UX體驗不佳的狀況,而且替你切版的工程師可能會在半夜偷偷罵你XD
    四、把你當前端工程師
    但是職稱叫做網頁設計師,內容卻寫要具備開發能力...?
  2. 平面設計的美感與排版能力
    會製作Banner、網站主視覺、整體網站色彩配置、區塊編排設計、內頁排版...等等
  3. 網頁程式如何運作的邏輯
    能減少和切版工程師、前端工程師打架的頻率
  4. 設計軟體 Photoshop、Illustrator 或 Adobe Xd 基本操作
    製作設計稿和處理SVG圖的能力、視專案需求修圖與合成、繪製icon...等等
  5. 時常逛逛國外網站,跟上網頁設計的趨勢潮流、多累積腦海的設計參考
    多看多逛,才有靈感!
  6. 網頁設計的實作經驗
    可以是一個Side Project、或是和工程師朋友一起完成的小專案,對於想轉職但是沒有相關工作經驗、作品的朋友很有幫助

有平面設計的底子,轉往網頁設計確實有一定的優勢,
但也有被「平面思維」侷限住的障礙。
這些都是轉型成網頁設計必須要克服與學習的點,在剛開始勢必得花很多時間搜尋網路上的教學和資源,做自主練習與進修。

花了很多時間還是覺得困難,這都是很正常的各位!

工作至今,我依然覺得網頁設計這條路不好走,不敢說已經從新手村畢業,要學的東西實在太多了!
不論是技術或趨勢,一直不斷在更新與進步,常常好不容易學了一個東西,覺得自己好厲害已經跟上潮流,殊不知逛一下國外平台的網站,才發現其實落伍了!

網頁設計真的是一條充滿挑戰與未知的道路啊~( ´艸`)

code

by Christopher Gower on Unsplash

目前在公司的工作內容

我們公司的人很少,加老闆只有三隻小貓XD
除了一般的品牌官網外,也有承接系統介面,和一些奇奇怪怪的功能性網站(?)

因為人手不足,要做的事情比較雜,我們的分工模式並沒有包含在上述分享的類型裡面。
基本上都是一人兩到三個新專案,從設計到切版和程式全部完成,客戶對過沒問題就上線!
若有做後台或特殊功能的,公司有外聘一位後端工程師會協助。
新專案製作途中,也會穿插各式各樣的網站維護內容及雜項。

目前的工作大致需要:

  1. 繪製設計稿
  2. 繪製SVG的插圖或icon
  3. HTML、CSS切版
  4. 一點點的JavaScript
    (我真的看不懂,都要一直拜託外聘的工程師,關於外聘的後端工程師為什麼會JavaScript,我以後會專門寫一篇文章給大家講解)
  5. 使用Bootstrap前端框架
  6. Banner動畫製作
  7. 突然要列出來有點難,想到會繼續補充!

這系列文章會分享

當初從平面踏入網頁設計,也是經過了不少辛苦的學習過程。
寫程式真的要每天都睡飽!不然好容易寫出一些邏輯奇奇怪怪的code。゚ヽ(゚´Д`)ノ゚。
雖然沒有到很專業,但這系列會分享一些平常使用到的技術與筆記,和當初轉職期間瘋狂研究的線上教學。
也會記錄一些愛用網站和程式資源!

希望可以藉由這30篇文章,
分享自己到目前的所學所聞。
也希望能幫助到有興趣從平面轉職成網頁設計的朋友:)


下一篇
【Day 2】首先,什麼是HTML?什麼是CSS?
系列文
從平面轉型成網頁設計的 UI/UX 設計師30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言